<template>
    <el-table :data="tableData" border style="width: 60%">
        <el-table-column label="满">
            <template #default="{ row }">
                <el-input v-model="row.fullPrice" />
            </template>
        </el-table-column>
        <el-table-column label="立减">
            <template #default="{ row }">
                <el-input @change="setFullPrice" v-model="row.reducePrice" />
            </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click.prevent="deleteRow(row)">删除</el-button>
                <el-button link type="primary" size="small" @click="onAddItem">添加</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tableData = ref([{
    fullPrice: 0,
    reducePrice: 0,
}])

const emits = defineEmits<{
    (event: string, value: IfullPrice): void
}>()

const setFullPrice = () => {
    tableData.value.forEach(item => {
        emits("getFullPrice", item)
    })
}

const deleteRow = (index: number) => {
    tableData.value.splice(index, 1)
}

const onAddItem = () => {
    tableData.value.push({
        fullPrice: 0,
        reducePrice: 0,
    })
}
</script>

<style lang="scss" scoped></style>